<template>
  <div>
    <el-menu class="menu1" @select="handleSelect" :unique-opened="true">
      <el-menu-item index="1" v-if="showHome">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2" v-if="showOwner">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>业主管理</span>
        </template>
        <el-menu-item index="2-1">业主信息管理</el-menu-item>
        <el-menu-item index="2-2">业主信息审核</el-menu-item>
      </el-submenu>
      <el-submenu index="3" v-if="showHouse">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>房屋管理</span>
        </template>
        <el-menu-item index="3-1">房屋信息管理</el-menu-item>
        <el-menu-item index="3-2">房屋信息审核</el-menu-item>
      </el-submenu>
      <el-submenu index="4" v-if="showCar">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>车辆管理</span>
        </template>
        <el-menu-item index="4-1">车辆信息管理</el-menu-item>
        <el-menu-item index="4-2">车辆信息审核</el-menu-item>
      </el-submenu>
      <el-submenu index="5" v-if="showParking">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>停车位管理</span>
        </template>
        <el-menu-item index="5-1">停车位信息管理</el-menu-item>
      </el-submenu>
      <el-submenu index="6" v-if="showAccess">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>门禁管理</span>
        </template>
        <el-menu-item index="6-1">社区大门门禁管理</el-menu-item>
        <el-menu-item index="6-2">停车场门禁管理</el-menu-item>
        <el-menu-item index="6-3">传感器管理</el-menu-item>
        <el-menu-item index="6-4">门禁使用记录管理</el-menu-item>
      </el-submenu>
      <el-menu-item index="7" v-if="showManager">
        <i class="el-icon-menu"></i>
        <span slot="title">管理员管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>

import Utils from '@/store/util.js';
export default {
  data() {
    return {
      showHome: true,
      showOwner: false,
      showHouse: false,
      showCar: false,
      showParking: false,
      showAccess: false,
      showManager: false,
    };
  },
  mounted() {

    Utils.$emit('refreshMenu','msg');
  },
  created() {
    var that = this;
    Utils.$on('refreshMenu',function (msg){
      console.log('刷新界面');
      const permissions = JSON.parse(localStorage.getItem('adminPermissions') || '[]');
      console.log(permissions);
      that.updateMenuVisibility();
    })
  },
  watch: {

  },
  methods: {
    updateMenuVisibility() {

      const permissions = JSON.parse(localStorage.getItem('adminPermissions') || '[]');

      this.showOwner = false;
      this.showHouse = false;
      this.showCar = false;
      this.showParking = false;
      this.showAccess = false;
      this.showManager = false;

      permissions.forEach(permission => {
        switch (permission) {
          case 0:
            this.showManager = true;
            break;
          case 1:
            this.showOwner = true;
            break;
          case 2:
            this.showHouse = true;
            break;
          case 3:
            this.showCar = true;
            break;
          case 4:
            this.showParking = true;
            break;
          case 5:
            this.showAccess = true;
            break;
          default:
            break;
        }
      });
    },
    handleSelect(key, keyPath) {
      const routeMap = {
        '1': 'home',
        '2-1': 'owner_info',
        '2-2': 'owner_verify',
        '3-1': 'house_info',
        '3-2': 'house_verify',
        '4-1': 'car_info',
        '4-2': 'car_verify',
        '5-1': 'parking_info',
        '5-2': 'parking_verify',
        '6-1': 'gate_access_info',
        '6-2': 'parking_access_info',
        '6-3': 'sensor_info',
        '6-4': 'access_records',
        '7': 'manager',
      };
      if (routeMap[key]) {
        this.navigateTo({ name: routeMap[key] });
      }
    },
    navigateTo(route) {
      if (this.$route.name !== route.name) {
        this.$router.push(route);
      } else {
        console.log('已经在当前路由，不需要跳转');
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* Add custom styling for your component */


</style>
